<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>我的第一个 Vue 页面</title>
    <!-- 引入 Vue 3 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js "></script>
</head>
<body>
<!-- 视图容器 -->
<div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击我</button>
    <h2>{{ values }}</h2>
    <button @click="changeValues">修改数组</button>
</div>

<!-- Vue 脚本 -->
<script>
    const { createApp } = Vue;

    // 创建 Vue 应用
    const app = createApp({
        data() {
            return {
                message: "你好，Vue！",
                values: [1, 2, 3, 4],
            };
        },
        methods: {
            changeMessage() {
                this.message = "你点击了按钮！";
            },

            changeValues(){
                this.values[2] = 999;
            }
        }
    });

    // 挂载到 #app 容器
    app.mount("#app");
</script>
</body>
</html>